<template>
	<view class="bg-light flex flex-column" :style="'padding-bottom:' + fixedHeight + 'px'">
		<!-- 收货地址 -->
		<view class="bg-white mx-3 my-2 p-3 rounded-lg">
			<view class="flex align-center">
				<image :src="Domain_ICON + '/position.png'" class="rounded-circle bg-info"
					style="width: 30rpx; height: 30rpx" mode=""></image>
				<text class="font ml-1">收件人</text>
				<text class="font ml-1">{{ goods[0].Sales_Contacts }}</text>
			</view>
			<view class="pl-4">
				<text class="font-sm">联系方式：{{ goods[0].Sales_Phone }}</text><br/>
				<text class="font-sm">{{goods[0].Sales_Type=='0'?'收货地址':'提货地址'}}：{{ goods[0].Sales_Address }}</text>
			</view>
		</view>
		<!-- 包裹 -->
		<view class="bg-white mx-3 my-2 px-3 pt-3 pb-5 rounded-lg">
			<view v-for="(item, index) in Parcel.children" :key="index"
				class="flex-column py-3 border-bottom border-light flex">
				<view class="pb-2 flex justify-between">
					<text class="font-md">物流单号</text>
					<text class="font-sm"
						@click="toggle(item.LogisticsNumbers)">{{ item.LogisticsNumbers.split(";")[0] }}等..<text
							class="text-blue font-small">点击查看</text></text>
				</view>
				<view class="flex">
					<image :src="Domain_IMG + item.Picture_URL" class="rounded-lg flex-shrink"
						style="width: 150rpx; height: 150rpx" mode=""></image>
					<view class="pr-3 ml-3 text-ellipsis" style="width: 100%; position: relative">
						<text class="font">{{ item.Article_Name }}</text><br />
						<text class="font-sm text-muted">规格:{{ item.Specifications_Name }}</text>
						<text class="font-sm"
							style="position: absolute; top: 50rpx; right: 0">×{{ item.Quantity }}</text>
						<view class="flex justify-between align-center w-100" style="height: 60rpx">
							<view class="" style="line-height: 60rpx">
								<text class="font-sm"
									style="position: absolute; bottom: 0; left: 0">￥{{ item.Sales_Unit_Price }}</text>
							</view>
							<view class="" v-if="item.Row_Status == '1' || item.Row_Status == '7'">
								<view v-show="hide" v-if="item.Refund_Type == '0'"
									@click="tuikuan(item.Sales_Order_SerialNumber)"
									class="bg-danger text-center font-sm text-white pr-3 pl-3" style="
                    line-height: 50rpx;
                    width: 100rpx;
                    height: 50rpx;
                    border-radius: 25rpx;
                  ">
									申请退款
								</view>
								<view v-show="hide" v-else @click="quxiao(item.Sales_Order_SerialNumber)"
									class="bg-success text-center font-sm text-white pr-3 pl-3" style="
                    line-height: 50rpx;
                    width: 100rpx;
                    height: 50rpx;
                    border-radius: 25rpx;
                  ">
									取消退款
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="bg-white mx-3 my-2 p-3 rounded-lg">
			<view class="border-bottom border-light text-ellipsis">
				<text class="font text-muted txt">订单编码<text class="ml-5 text-hover-dark">{{
            Parcel.Collection_SerialNumber
          }}</text></text><br />
				<text class="font text-muted txt">下单时间<text class="ml-5 text-hover-dark">{{
            Parcel.children[0].Sales_Date
          }}</text></text><br />
				<text class="font text-muted txt">商品金额<text
						class="ml-5 text-hover-dark">￥{{ Price(Parcel.Sales_Amount) }}</text></text><br />
				<text class="font text-muted txt">订单运费<text
						class="ml-5 text-hover-dark">￥{{ Price(Parcel.Delivery_Amount) }}</text></text><br />
				<!-- <text class="font text-muted txt">粮票抵扣<text class="ml-5 text-hover-dark">￥0.00</text></text><br> -->
				<!-- <text class="font text-muted txt">支付方式<text class="ml-5 text-hover-dark">微信</text></text><br> -->
				<text class="font text-muted txt">备注信息<text class="ml-5 text-hover-dark">{{
            Parcel.remarks
          }}</text></text>
			</view>
			<view class="mt-3 flex flex-row-reverse">
				<text class="font-sm text-muted">共<text class="text-hover-dark">{{ Parcel.quantity }}</text>件商品，合计<text
						class="text-hover-dark font-weight-bold">￥{{ accAdd(Parcel.Sales_Amount, Parcel.Delivery_Amount) }}</text></text>
			</view>
		</view>
		<view id="fixed" class="px-3 py-2 fixed-bottom flex justify-between bg-white">
			<view v-if="Parcel.children[0].Row_Status == '0'"
				class="bg-muted rounded text-center py-2 text-white font font-weight-bold"
				style="width: 220rpx; float: right" @click="cancel(Parcel.Collection_SerialNumber)"
				hover-class="bg-hover-info" :hover-stay-time="150">取消该订单</view>
			<view v-if="Parcel.children[0].Row_Status == '0'"
				class="bg-info rounded text-center py-2 text-white font font-weight-bold"
				style="width: 220rpx; float: right" @click="handleDetails()" hover-class="bg-hover-info"
				:hover-stay-time="150">去付款</view>
		</view>
		<Tailpay :amount="Price(accAdd(Parcel.Sales_Amount, Parcel.Delivery_Amount))"
			:Sales_Order_SerialNumber="Parcel.children[0].Sales_Order_SerialNumber"
			:Article_Name="Parcel.children[0].Article_Name" :Collection_SerialNumber="Parcel.Collection_SerialNumber"
			:show="isShow" @Close="handleClose()"></Tailpay>
		<Tailpays :amount="Price(accAdd(Parcel.Sales_Amount, Parcel.Delivery_Amount))"
			:Sales_Order_SerialNumber="Parcel.children[0].Sales_Order_SerialNumber"
			:Article_Name="Parcel.children[0].Article_Name" :Collection_SerialNumber="Parcel.Collection_SerialNumber"
			:show="isShow2" @Close="handleClose()"></Tailpays>
	</view>
</template>

<script>
	import Tailpay from "@/components/payment/Tailpayment.vue";
	import Tailpays from "@/components/payment/Tailpayments.vue";
	const app = getApp();
	export default {
		data() {
			return {
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
				Domain_IMG: app.globalData.Domain_IMG, //全局变量域名
				fixedHeight: 0, //底部元素高度
				loading: true, //节流
				isShow: false, //调起支付方式
				isShow2: false, //调起支付方式
				hide: true,
				Parcel: {
					//订单详情
				},
				LogisticsNumbers: [],
				goods: [],
			};
		},
		components: {
			Tailpay,
			Tailpays,
		},
		computed: {
			Price() {
				//补零
				return function(price) {
					if (price) {
						if (RegExp(/\./).exec(price)) {
							return price;
						} else {
							return price + ".00";
						}
					} else {
						return "";
					}
				};
			},
		},
		onLoad(a) {
			this.Load(a);
			this.fixed();
			this.Parcel = JSON.parse(decodeURIComponent(a.Order));
			console.log(this.Parcel);
			this.Parcel.children.forEach((item) => {
				console.log(item.LogisticsNumbers.split(";"));
			});
		},
		methods: {
			fixed() {
				//底部模块高度获取
				const query = uni.createSelectorQuery();
				query
					.select("#fixed")
					.boundingClientRect((data) => {
						this.fixedHeight = data.height;
					})
					.exec();
			},
			handleClose() {
				//关闭支付
				if (this.Parcel.children.length > 1) {
					this.isShow2 = false;
				} else {
					this.isShow = false;
				}
			},
			accMul(arg1, arg2) {
				//浮点型相乘
				let m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length;
				} catch (e) {}
				try {
					m += s2.split(".")[1].length;
				} catch (e) {}
				return (
					(Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
					Math.pow(10, m)
				);
			},
			accAdd(arg1, arg2) {
				//浮点型相加
				var r1, r2, m;
				try {
					r1 = arg1.toString().split(".")[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split(".")[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (arg1 * m + arg2 * m) / m;
			},
			//取消订单
			cancel(id) {
				uni.showLoading({
					title: "取消中....",
				});
				var _this = this;
				if (this.loading) {
					this.loading = false;
					uni.request({
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						url: app.globalData.Domain_Name + "/WXCancelOrder",
						method: "POST",
						data: {
							Open_ID: app.globalData.openid,
							Enterprise_Info_SerialNumber: app.globalData.enterprise,
							Collection_SerialNumber: id,
						},
						success: (res) => {
							uni.hideLoading();
						},
						complete() {
							uni.navigateTo({
								url: "../../pages/my/order?id=1",
							});
							_this.loading = true;
						},
					});
				}
			},
			handleDetails() {
				//打开去支付
				if (this.Parcel.children.length == 1) {
					this.isShow = true;
				} else {
					this.isShow2 = true;
				}
			},
			Load(e) {
				this.goods = JSON.parse(decodeURIComponent(e.goods));
			},
			//取消退款
			quxiao(Sales_Order_SerialNumber) {
				let _this = this;
				uni.showToast({
					title: "已取消退款,请不要重复点击哦",
					icon: "none",
				});
				if (_this.loading) {
					_this.loading = false;
					uni.request({
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						url: app.globalData.Domain_Name + "/NoClientRefund",
						method: "POST",
						data: {
							Sales_Order_SerialNumber,
							Cause: "客户取消申请",
						},
						success: (res) => {
							console.log(res);
							if (res.data.Status == "success") {
								this.hide = false;
							}
						},
						complete() {
							_this.loading = true;
						},
					});
				}
			},
			//申请退款
			tuikuan(Sales_Order_SerialNumber) {
				uni.showToast({
					title: "工作人员紧急处理中,请不要重复点击哦",
					icon: "none",
				});
				let _this = this;
				//生成退款日志
				if (this.loading) {
					this.loading = false;
					uni.request({
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						url: app.globalData.Domain_Name + "/WXWeChatRefundNativeAction",
						method: "POST",
						data: {
							Sales_Order_SerialNumber,
						},
						success: (res) => {
							console.log(res);
							if (res.data.Status == "success") {
								this.hide = false;
							}
						},
						complete() {
							_this.loading = true;
						},
					});
				}
			},
			toggle(type) {
				uni.showModal({
					title: "全部物流单号",
					content: `${type}`,
				});
			},
		},
	};
</script>

<style>
	.txt {
		line-height: 60rpx;
	}
</style>